<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>飞翔的小鸟</title>
		<style type="text/css">
		/*这是一个注释*/
			* {
				margin: 0;
				padding: 0;
				-webkit-user-select: none;
			}
			
			#game {
				width: 343px;
				height: 480px;
				background: url(../JS/Day15/img/bg.jpg) no-repeat;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
			}
			
			#head {
				width: 236px;
				height: 77px;
				background: url(../JS/Day15/img/head.jpg) no-repeat;
				position: absolute;
				top: 100px;
				left: 50%;
				margin-left: -118px;
			}
			
			#head>img {
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -13px;
				animation: flyUpDown 1.5s linear infinite;
			}
			
			@keyframes flyUpDown {
				0% {
					top: 50%;
				}
				25% {
					top: 25%;
				}
				50% {
					top: 50%;
				}
				75% {
					top: 75%;
				}
				100% {
					top: 50%;
				}
			}
			
			#menu {
				width: 100%;
				position: absolute;
				top: 300px;
				text-align: center;
			}
			
			#menu>img {
				cursor: pointer;
			}
			
			#end {
				width: 100%;
				position: absolute;
				top: 100px;
				text-align: center;
				font-size: 25px;
				display: none;
			}
			
			#currentScore {
				position: absolute;
				left: 250px;
				top: 40px;
			}
			
			#bestScore {
				position: absolute;
				left: 250px;
				top: 90px;
			}
			
			#pipes {
				height: 425px;
				list-style: none;
			}
			
			#bird {
				position: absolute;
				left: 62px;
				top: 50%;
				display: none;
				z-index: 10;
			}
			
			#score {
				width: 100%;
				position: absolute;
				top: 0;
				text-align: center;
				display: none;
			}
			/*预留管道的css样式*/
			/*li的css样式*/
			
			.pipe {
				width: 62px;
				height: 425px;
				position: absolute;
			}
			/*上管道*/
			
			.upPipe {
				width: 62px;
				position: absolute;
				top: 0;
				background: url(../JS/Day15/img/up_pipe.png) no-repeat bottom, url(../JS/Day15/img/up_mod.png) repeat-y;
			}
			/*下管道*/
			
			.downPipe {
				width: 62px;
				position: absolute;
				bottom: 0;
				background: url(../JS/Day15/img/down_pipe.png) no-repeat top, url(../JS/Day15/img/down_mod.png) repeat-y;
			}
		</style>
	</head>

	<body>
		<!--游戏最外层的区域-->
		<div id="game">
			<!--开始图片-->
			<div id="head">
				<img src="../JS/Day15/img/bird.png" />
			</div>
			<!--开始游戏按钮-->
			<div id="menu">
				<img src="../JS/Day15/img/start.jpg" id="start" />
			</div>
			<!--结束游戏-->
			<div id="end">
				<img src="../JS/Day15/img/message.jpg" />
				<span id="currentScore">0</span>
				<span id="bestScore">0</span>
			</div>
			<!--分数-->
			<div id="score">
				<img src="../JS/Day15/img/0.jpg" />
			</div>
			<!--小鸟-->
			<img src="../JS/Day15/img/bird.png" id="bird" />
			<!--管道-->
			<ul id="pipes"></ul>
			<!--音频-->
			<audio src="../JS/Day15/music/bullet.mp3" id="bullet"></audio>
			<audio src="../JS/Day15/music/game_music.mp3" id="gameMusic"></audio>
			<audio src="../JS/Day15/music/game_over.mp3" id="gameOver"></audio>
		</div>
		<!--测试管道用的-->
		<!--<div class="downPipe" style="width: 62px; height: 100px; border: solid red;"></div>-->
	</body>
	<script type="text/javascript" charset="utf-8">
		var startBtn = document.getElementById("start");
		var head = document.getElementById("head");
		var menu = document.getElementById("menu");
		var end = document.getElementById("end");
		var pipes = document.getElementById("pipes");
		var bird = document.getElementById("bird");
		var gameDiv = document.getElementById("game");
		var scoreDiv = document.getElementById("score");
		var bulletMusic = document.getElementById("bullet");
		var gameMusic = document.getElementById("gameMusic");
		var gameOverMusic = document.getElementById("gameOver");
		var currentMusic = document.getElementById("currentScore");
		var bestScore = document.getElementById("bestScore");
		var scoreImg = document.querySelector("#score>img");
		
		var num = 0;
		var birdUoTimer;
		var birdDownTimer;
		var speed = 0;
		
		startBtn.onclick = function (e) {
			var even = e || event;
			even.stopPropagation();
			even.cancelBubble = true;
			gameMusic.play();
			gameMusic.loop = "loop";
			head.style.display = "block";
			scoreDiv.style.display = "block";
			setInterval(createPipe, 3000);
			birdDownTimer = setInterval(birdDown, 20);
			gameDiv.onclick = gameClick;
			setInterval(function () {
				var lis = document.querySelectorAll("li");
				for (var i = 0; i < lis.length; i++) {
					monitorCrash(lis[i].firstElementChild);
					monitorCrash(lis[i].lastElementChild);
				}
			}, 10);
		}		
		
		function createPipe () {
			var li = document.createElement("li");
			li.className = "pipe";
			
		}
	
		
	</script>
</html>